Component Showcase
Every component in the BaseNative design system, server-rendered and styled from the core CSS. Each section below is a live render call — no mockups.
Buttons
Badges
Variants
Avatars
Sizes and fallbacks
Form Controls
Inputs
We will not share your email.
Must be at least 3 characters
Textarea
Select
Combobox
Multiselect
JavaScriptCSS
Checkbox, radio, toggle
Feedback
Alerts
This is an informational message.
Operation completed successfully.
Proceed with caution.
Something went wrong.
Progress
Spinner
Skeleton
Cards & Layout
Card
Card body content with descriptive text about the feature or item being presented.
Accordion
What is BaseNative?
A lightweight signals-based runtime for native template elements with ~120 lines of client code.
How does SSR work?
The server renderer evaluates @if, @for, @switch directives at request time and returns clean HTML.
What about hydration?
The client hydrate() function walks the DOM tree, binds reactive expressions, and attaches event handlers.
Tabs
BaseNative brings Angular-inspired control flow to native template elements.
Signals, computed values, effects, SSR, hydration, and template directives.
signal(), computed(), effect(), hydrate(), render().
Navigation
Breadcrumb
Pagination
Data
Table
| Name | Role | Status |
|---|---|---|
| Alice Johnson | Admin | Active |
| Bob Smith | Editor | Active |
| Carol Davis | Viewer | Inactive |
Data grid
| Task ↑ | Assignee | Priority | Status | |
|---|---|---|---|---|
| Design token system | Alice | High | Done | |
| Signal reactivity | Bob | High | Done | |
| Server rendering | Carol | Medium | Active | |
| Client hydration | Dan | Medium | Pending | |
| Component library | Alice | Low | Active |
Showing 1–5 of 5
Tree
- 📁src
- 📁runtime
- 📄signals.js
- 📄hydrate.js
- 📄bind.js
- 📁server
- 📁examples
Virtual list
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
Item 13
Item 14
Item 15