mirror of https://github.com/chakra-ui/chakra-ui.git synced 2026-09-14 16:43:45 +08:00

Files

T

Segun Adebayo 29322fcd0d feat(v3): redesign styled system (#8312 )

* refactor: move styled-system into main package

* chore: initial system scaffold

* fix: base condition

* chore: define base preset using new api

* feat: define new system api

* chore: update tests to use system api

* refactor: move generated stuff to dedicated folder

* chore: add robust tests and conditions

* feat: add color mix

* chore: get first prototype working. woohoo!

* chore: test color mix

* fix: color palette

* fix: color palette

* chore: scaffold for system

* chore(deps): update dependency tsx to v4.7.1 (#8321)

* chore(deps): update dependency @types/node to v18.19.18

* chore(deps): update dependency tsx to v4.7.1

---------

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* refactor(v3): remove usage of descendants (#8245)

* feat: migrate accordion

* feat: remove from menu

* feat: migrate pin

* feat: migrate tabs

* fix: remove node

* feat: removed descendant

* fix: remove exports

* fix: query selector issue

* chore: fix tests

* fix: refactor

* chore: fix stories and tests

* fix: escape value

* fix: use menu item id if supplied

* chore: update docs

* chore: rewrite

* fix: tab syltes

* feat: include reset css in system

* fix: dont generate reset always

* chore: setup styled factory

* feat: implement use recipe

* chore(deps): update dependency @types/node to v18.19.19 (#8320)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* fix: assign static properties

* feat: slot recipe

* feat: expose identity functions

* chore: add define system

* refactor: theming -> config

* chore: scaffold for new cli

* refactor: redesign cli

* chore: prune packages

* chore: fix deps

* chore: add preset

* feat: add breakpoint

* feat: support conditional variants

* fix: codegen

* docs: document new api

* refactor: use new system in components

* chore: update lock

* refactor: component themes -> recipes

* refactor: theme recipes

* chore: rm extend theme

* fix: token references

* fix: token refernce in css

* chore: rm props of

* chore: rename foundations to tokens

* refactor: phase 1

* refactor: optimize media query based on #7978

* chore: rm media query mod

* refactor: redesign theme to use new convention

* chore: cli emits to src

* chore: simplify simplify

* refactor: reorganize all things

* chore: some more progress

* fix: improve inference for For

* refactor: redesign avatar

* chore: goodbye to storybook addon

* chore: phew

* chore: update lockfile

* refactor: revamp badge

* refactor: move tweaks

* refactor: redesign inputs and field

* chore: cleanup input

* chore: clean up card

* refactor: tabs

* refactor: dialog

* refactor: prop getter naming

* refactor: textarea

* chore: textarea refactor

* refactor: checkbox

* refactor: radio group and progress

* feat: add generic enter and exit keyframes

* refactor: slider

* refactor: popover

* refactor: story groups

* refactor: breadcrumb component and recipe

* docs: update migration guide

* refactor: accordion

* chore: cleanup button stories

* chore: cleanup button stories

* chore: rm close button

* refactor: badge and code

* feat: add classic look for radio

* feat: update kbd

* refactor: link component

* refactor: menu

* refactor: menu

* chore: wip menu

* refactor: avatar and tag

* chore: update menu

* chore: rm clickable

* chore: mv switch to slot recipe

* refactor: revamp select

* refactor: skeleton

* refactor: skeleton theme

* chore: cleanup stories

* feat: account for empty badge

* fix(components): suppress unnecessary re-renders of Checkbox and Radio component (#8349)

* fix(components): suppress unnecessary re-renders of Checkbox and Radio component

* fix(components): ensure global event listeners are set up

* refactor: table

* refactor: stat

* refactor: stepper -> steps

* refactor: blockquote

* refactor: divider to separator

* refactor: stories

* refactor: cleanup layout components

* refactor: layout component stories

* refactor: drawer component

* refactor: overlay -> backdrop

* fix: hidefrom and hidebelow

* fix: hidefrom and hidebelow

* chore: sort stories

* refactor: number input

* refactor: pin input

* chore: update cli

* refactor: a lot of components

* refactor: rm custom forward-ref

* refactor: round 2

* refactor: round 3

* refactor: toasts

* refactor: is props

* fix: lint

* chore: get build working

* fix: build

* fix: build

* refactor: code

* test: fix

* fix: storybook build

* test: fix

* test: updates round 2

* test: updates round 3

* test: updates round 4

* test: updates round 5

* chore: update lockfile

* test: fix

* chore: update deps

* refactor: docs and imports

* chore: update eslint

* refactor: docs

* docs: update content

* docs: round 2

* docs: update

* docs: update tabs

* docs: rename field

* docs: rename

* refactor: search meta

* chore: update

* feat: implement unstyled prop on root components

* test: refactor

* refactor: docs

* chore: update stats

* refactor: slider and range slider

* chore: update breadcrumb

* docs: card

* docs: checkbox

* docs: editable

* refactor: link and docs

* docs: update

* chore: add missing transition

* docs: update scripts

---------

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Eelco Wiersma <eelco@appulse.nl>
Co-authored-by: autologie <7351859+autologie@users.noreply.github.com>

2024-03-25 21:53:19 +00:00

3.3 KiB

Raw Permalink Blame History

Welcome to Chakra UI ⚡️

Works out of the box. Chakra UI contains a set of polished React components that work out of the box.
Flexible & composable. Chakra UI components are built on top of a React UI Primitive for endless composability.
Accessible. Chakra UI components follows the WAI-ARIA guidelines specifications.
Dark Mode 😍: All components are dark mode compatible.

Looking for the documentation?

https://chakra-ui.com

Installing Chakra UI

⚡️Chakra UI is made up of multiple components and tools which you can import one by one. All you need to do is install the @chakra-ui/react package:

$ yarn add @chakra-ui/react
# or
$ npm install --save @chakra-ui/react

Getting set up

To start using the components, please follow these steps:

Wrap your application in a ThemeProvider provided by @chakra-ui/react

import { ColorModeProvider, ThemeProvider } from "@chakra-ui/react"

const App = ({ children }) => (
  <ThemeProvider>
    <ColorModeProvider>{children}</ColorModeProvider>
  </ThemeProvider>
)

ColorModeProvider is a context that provides light mode and dark mode values to the components. It also comes with a function to toggle between light/dark mode.

Now you can start using components like so!:

import { Button } from "@chakra-ui/react"

const App = () => <Button>I just consumed some ⚡️Chakra!</Button>

Contributing

Feel like contributing? That's awesome! We have a contributing guide to help guide you.

The components to be built come from the Aria Practices Design Patterns and Widgets.

Contributors ✨

Thanks goes to these wonderful people (emoji key):

_{Segun Adebayo}
💻 🚧 📖 💡 🎨

_{Tioluwani Kolawole}
📖 💡 🚧

This project follows the all-contributors specification. Contributions of any kind welcome!

3.3 KiB Raw Permalink Blame History Unescape Escape